<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>simcity</title>
  <link rel="stylesheet" href="./main.css">
  <script type="importmap">
    {
      "imports": {
        "lib/": "./lib/",
        "@/": "./src/",
        "three": "./lib/three.module.js"
      }
    }
  </script>
  <script src="./lib/ramda.min.js"></script>
</head>

<body>
  <div id="root-window">
    <!-- threejs 添加 `canvas` 给此元素 -->
    <div id="render-target">
      <div id="ui-toolbar">
        <div>
          <button id="button-select" class="ui-button selected">select</button>
          <button id="button-bulldoze" class="ui-button">bulldoze</button>
          <button id="button-residential" class="ui-button">residential</button>
          <button id="button-commercial" class="ui-button">commercial</button>
          <button id="button-industrial" class="ui-button">industrial</button>
          <button id="button-road" class="ui-button">road</button>
        </div>
        <div id="info-panel" class="ui-container">
          <h1>INFO</h1>
          <div id="selected-object-info"></div>
        </div>
        <button id="button-pause" class="ui-button">PAUSE</button>
      </div>
    </div>
  </div>
  <script type="module" src="./src/main.js"></script>
</body>

</html>